<template>
    <div class="main_content">
        <div class="search">
            <div class="list">
                <el-button type="primary" @click="goBack" style="margin-right:20px" size="small" plain>返回</el-button>
            </div>
            <div class="list">
                <span>硬件SN码:</span>
                <Input v-model="bound_sn" disabled style="width: 150px;margin-right:20px" clearable />
                <input type="password" autocomplete="new-password" style="display: none" />
            </div>
        </div>
        <div class="bottom">
            <el-tabs v-model="activeName">
                <el-tab-pane label="视频配置" name="first">
                    <div class="first">
                        <div class="left">
                            <el-button icon="el-icon-plus" @click="updateRow(0)"  type="primary" size="small" plain>视频地址</el-button>
                            <ul>
                                <li v-for="(item,index) in streamList" :key="index" :class="item.streamId == streamId?'active':''" @click="getStreamDetails(item)">
                                    <span>{{item.name}}</span>
                                    <span>
                                        <i class="el-icon-edit-outline" @click="updateRow(1,item)" ></i>
                                        <i class="el-icon-delete"  @click="removeStreamRow(item,index)"></i>
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div class="right">
                            <div class="top">
                                <p>
                                    <span>地址:</span>
                                    <span style="color: #0ABDF8">{{streamUrl}}</span>
                                </p>
                                <el-button icon="el-icon-plus" @click="updateConfigRow(0)"  type="primary" size="small" plain>算法</el-button>
                            </div>
                            <div class="bottom">
                                <el-table :data="streamConfigList" style="width: 100%" border :height="tableHeight">
                                    <el-table-column fixed prop="algTypeName" label="算法类型" ></el-table-column>
                                    <el-table-column prop="batteryPower" label="生效时间" >
                                        <template slot-scope="scope">
                                            <div style="padding: 10px;display: flex;flex-wrap: wrap;">
                                                <span v-for="(item,index) in scope.row.params.timeList" :key="index" style="margin-right: 10px">
                                                    {{item.time[0]}} - {{item.time[1]}}
                                                </span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-switch  v-model="scope.row.flag" active-color="#13ce66" inactive-color="#999" @change="updateStatus(scope.$index, streamConfigList)"  v-preventReClick="1500"></el-switch>
                                            <el-button @click.native.prevent="configRow(scope.$index, streamConfigList)" type="text" size="small" >配置</el-button>
                                            <el-button @click.native.prevent="paramsRow(scope.$index, streamConfigList)" type="text" size="small" >参数</el-button>
                                            <el-button @click.native.prevent="removeConfigRow(scope.$index, streamConfigList)" type="text" size="small" style="color: red">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="数据推送" name="second">
                    <div class="second">
                        <div class="second_content">
                            <ul v-if="configUrlList.length > 0">
                                <el-button type="primary" @click="add" style="width: 70px" size="small" plain v-if="btnFlag">添加</el-button>
                                <li v-for="(item,index) in configUrlList" :key="index">
                                    <span>推送地址{{index +1}}:</span>
                                    <span v-if="!btnFlag">{{item}}</span>
                                    <Input v-model="configUrlList[index]"  style="width: 300px;" v-if="btnFlag" clearable />
                                    <Icon type="md-close" v-if="btnFlag" size="24" @click="removeRow(item,index)" style="cursor: pointer;margin-left: 10px"/>
                                </li>
                            </ul>
                            <div class="no_data" v-if="configUrlList.length == 0&&!btnFlag">
                                暂无数据
                            </div>
                        </div>
                        <div class="second_bottom">
                            <el-button type="primary" @click="Edit" style="margin-right:20px" size="small" plain v-if="!btnFlag">编辑</el-button>
                            <el-button type="info" @click="cancel(0)" style="margin-right:20px" size="small" plain v-if="btnFlag">取消</el-button>
                            <el-button type="primary" @click="Submit" style="margin-right:20px" size="small" plain v-if="btnFlag">确定</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <Modal v-model="streamMoadl" :title="isAdd?'添加视频地址':'编辑视频地址'" :mask-closable="false">
            <div>
                <div class="item2">
                    <span class="tip">*</span>
                    <span>名称:</span>
                    <Input v-model="name" placeholder="请输入名称" style="width: 400px" clearable />
                </div>
                <div class="item2" >
                    <span class="tip">*</span>
                    <span>地址:</span>
                    <Input v-model="streamUrl" placeholder="请输入地址" style="width: 400px" clearable />
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitStream" type="primary" size="small" plain v-preventReClick="1500">保存</el-button>
            </div>
        </Modal>

         <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="addalgModel" title="添加算法" width="900px;" :mask-closable="false" :footer-hide='algList.length>0?false:true'>
            <div class="addModel">
                <div class="bottom">
                    <h2 style=" width: 98%;color:#1891FF;margin: 0 20px;">算法类型</h2>
                    <div class="list" v-if="algList.length>0">
                         <div  class="item" v-for="item in algList" :key='item.id' @click="setBtn(item)" :class="item.flag==true?'active':''">
                            <img :src="item.iconUrl" class="img" />
                            <div class="text">{{item.name}}</div>
                         </div>
                     </div>
                     <div v-else class="no_lsit">
                        <img src="./../../assets/images/hdc/alg_config/sys_setting.png"  style="width:460px;height:300px;margin:0 auto;" />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAlg" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="deleteComgigModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(4)" type="info" size="small" plain>取消</el-button>
                <el-button @click="deteleConfig" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="paramsModal" title="配置参数" width="720px;" :mask-closable="false">
            <div style="width: 96%; height: 40px;display: flex;justify-content: flex-start;align-items: center;background: #ccc;margin: 0 auto;">
                <span style="margin-left: 20px">参数配置</span>
                <i class="el-icon-circle-plus-outline" @click="paramsAdd" style="color: rgb(10, 189, 248);margin-left: 20px;font-size: 24px;cursor: pointer" v-if="!paramsFlag"></i>
                <i class="el-icon-edit" @click="paramsEdit" style="color: rgb(10, 189, 248);margin-left: 20px;font-size: 24px;cursor: pointer" v-if="paramsFlag"></i>
            </div>
            <el-table :data="paramsList" style="width: 96%;margin: 10px auto 0;"  :border="!paramsFlag">
                <el-table-column fixed prop="algTypeName" label="名称" >
                    <template slot-scope="scope">
                        <span v-if="paramsFlag">{{scope.row.key}}</span>
                        <Input v-if="!paramsFlag" v-model="scope.row.key"  placeholder="请输入参数名字" style="width:200px;" clearable />
                    </template>
                </el-table-column>
                <el-table-column prop="batteryPower" label="配置" >
                    <template slot-scope="scope">
                        <span v-if="paramsFlag">{{scope.row.value}}</span>
                        <Input  v-if="!paramsFlag" v-model="scope.row.value"  placeholder="请输入参数配置" style="width:200px;" clearable />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" v-if="!paramsFlag">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="removeParamsRow(scope.$index, paramsList)" type="text" size="small" style="color: red">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer">
                <el-button @click="cancel(5)" type="info" size="small" plain v-if="!paramsFlag">取消</el-button>
                <el-button @click="submitParams" type="primary" size="small" plain v-preventReClick="1500" v-if="!paramsFlag">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="ConfigureModal" title="算法配置" width="1032px;" :mask-closable="false">
            <div slot = "header" style = "display:flex;justify-content: space-between;font-size:14px;align-items:center;font-weight:700;">
                <span >算法配置</span >
                <span style = "font-size:31px;cursor: pointer;" @click = "flv_close" >
                    <Icon type = "ios-close-circle" size = "20" style = "color:#fff;" />
                </span>
            </div>
            <div class="configure">
                <div class="play">
                    <video ref = "videoElement" id = "videoElement" controls autoplay muted width = "1000" height = "550" style = "object-fit: fill;outline:none;" ></video >
                    <div class="canvas-box" style="width: 1000px; height: 550px;">
                        <canvas id="cvs" width="1000" height="550">不支持canvas</canvas>
                    </div>
                </div>
                <div class="attribute">
                    <div class="attrTiltle">生效时间</div>
                    <div class="timeLi" v-for="(item,index) in timeList">
                        <Time-picker transfer format="HH:mm" type="timerange" v-model="timeList[index].time" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>
                        <Button @click="delTime(index)" class="closeTime" shape="circle" icon="ios-close"></Button>
                    </div>
                    <Button type="primary" @click="addTime">添加</Button>
                    <Button v-if="configType==30||configType==40" class="draw" type="primary" @click="drawCanvas">绘制聚集区域
                    </Button>
                    <div v-if="configType==60" class="attrTiltle">离岗判断</div>
                    <div v-if="configType==40" class="attrTiltle">聚集人数判断</div>
                    <Input v-if="configType==60" v-model="personNum" class="attInput" style="width: 300px;margin-bottom: 10px" clearable >
                        <span slot="prepend">人数（人）</span>
                    </Input>
                    <Input v-if="configType==40" v-model="personNum" class="attInput" style="width: 300px;margin-bottom: 10px" clearable >
                        <span slot="append">人</span>
                    </Input>
                    <Input v-if="configType==60" v-model="times" class="attInput" style="width: 300px;margin-bottom: 10px" clearable >
                        <span slot="prepend">时长（分钟）</span>
                    </Input>
                </div>
                <ul class="clickRightMenu" id="clickRightMenu">
                    <li id="btn">保存绘制图形</li>
                    <li id="btn1">取消</li>
                </ul>
            </div>
            <div slot="footer">
                <el-button @click="cancel(6)" type="info" size="small" plain>取消</el-button>
                <el-button @click="sumbitConfigure" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script >
import hlsjs from "hls.js";
import {
    getHDCAlgDeviceConfig,
    getHDCAlgDeviceConfigure,
    getHDCAlgDeviceStreamAdd,
    getHDCAlgDeviceStreamConfigAdd, getHDCAlgDeviceStreamConfigDel, getHDCAlgDeviceStreamConfigEdit,
    getHDCAlgDeviceStreamConfigList,
    getHDCAlgDeviceStreamDel,
    getHDCAlgDeviceStreamEdit,
    getHDCAlgDeviceStreamList
} from "@/api/hardware";
import {getAlgorithmList} from '@/api/api'
export default {
    name: "alg_config",
    data(){
        return{
            bound_sn: "",
            activeName: 'first',
            btnFlag: false,
            configUrlList: [],
            configList: [],
            streamList: [],
            streamMoadl: false,
            isAdd:false,
            name:'',
            streamUrl:"",
            deleteModal:false,
            streamConfigList:[],
            tableHeight:window.innerHeight - 395 ,
            algList:[],
            addalgModel:false,
            deleteComgigModal:false,
            algId:'',
            paramsList:[],
            paramsModal :false,
            paramsFlag:true,
            paramsNewList:[],
            ConfigureModal:false,
            //配置时间
            timeList: [
            ],
            configType:"",
            personNum:'',
            times:"",
            drawFlag:false,
            points:[],
            drawbtn:false,
            line:1,
        }
    },
    methods:{
        goBack() {
            this.$router.go(-1);
        },
        add(){
           this.configUrlList.push('');
        },
        Edit(){
            this.btnFlag = true;
        },
        removeRow(item,index){
            this.configUrlList.splice(index,1)
        },
        Submit(){
            for(let i = 0; i<this.configUrlList.length; i++){
                if(this.configUrlList[i] == '' ) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请输入推送地址"
                    });
                    return;
                }
            }
            let params = {
                sn:this.bound_sn,
                configCode:'push_url',
                configList:this.configUrlList
            }
            getHDCAlgDeviceConfigure(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getConfigUrlList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        cancel(type){
           if(type == 0) {
               this.configUrlList = this.configList;
               this.btnFlag = false;
           } else if (type == 1) {
               this.streamMoadl =false
           } else if (type == 2) {
               this.deleteModal = false;
           } else if (type == 3) {
               this.addalgModel = false;
           } else if (type == 4) {
               this.deleteComgigModal =false;
           } else if (type == 5) {
               this.paramsFlag = true;
               this.paramsList = this.paramsNewList;
           } else if (type == 6) {
               this.ConfigureModal = false;
               this.$refs.videoElement.setAttribute('src', '')
               this.cancelVideo();
           }
        },
        getConfigUrlList() {
             let params = {
                 sn:this.bound_sn,
                 configCode:'push_url',
             }
            getHDCAlgDeviceConfig(params).then(res=>{
                if(res.code == 200) {
                    let list = JSON.stringify(res.data.list);
                    this.configUrlList = JSON.parse(list);
                    this.configList = JSON.parse(list);
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getStreamList(type){
            let params = {
                sn:this.bound_sn
            }
            getHDCAlgDeviceStreamList(params).then(res=>{
                if(res.code == 200) {
                    this.streamList = res.data.list;
                    if(this.streamList.length > 0) {
                        this.streamId = type?this.streamId : this.streamList[0].streamId;
                        this.streamUrl = type?this.streamId : this.streamList[0].streamUrl;
                        this.getStreamConfigList();
                    };
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        updateRow(type,rows){
            this.streamMoadl =true;
            if(type == 0){
               this.isAdd = true;
               this.name ="";
               this.streamUrl ="";
            } else if(type == 1) {
               this.isAdd = false;
               this.name = rows.name;
               this.streamUrl = rows.streamUrl;
               this.streamId = rows.streamId;
            }
        },
        submitStream(){
            if(this.name == '') {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入名称"
                });
                return;
            }
            if(this.streamUrl == ''){
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入地址"
                });
                return;
            }
            if(this.isAdd){
                let params = {
                    sn:this.bound_sn,
                    name:this.name,
                    streamUrl:this.streamUrl
                }
                getHDCAlgDeviceStreamAdd(params).then(res=>{
                    if(res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getStreamList(1);
                        this.streamMoadl = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            } else {
                let params = {
                    sn:this.bound_sn,
                    name:this.name,
                    streamUrl:this.streamUrl,
                    streamId:this.streamId,
                }
                getHDCAlgDeviceStreamEdit(params).then(res=>{
                    if(res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getStreamList(1);
                        this.streamMoadl = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            }
        },
        removeStreamRow(rows,index){
            this.streamId = rows.streamId;
            this.deleteModal = true;
        },
        detele(){
            getHDCAlgDeviceStreamDel(this.streamId).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getStreamList();
                    this.deleteModal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getStreamDetails(item){
            this.streamId = item.streamId;
            this.streamUrl = item.streamUrl;
            this.getStreamConfigList();
        },
        getAlgList(){
             let params = {
                 keyword:"",
                 state:"",
             }
            getAlgorithmList(params).then(res=>{
                if(res.code == 200) {
                    let list = res.data.list;
                    list.forEach(v=>{
                        v["flag"] = false;
                    })
                    for(let i = 0; i<list.length;i++){
                        for(let j = 0; j< this.streamConfigList.length;j++) {
                            if(list[i].type == this.streamConfigList[j].algType){
                                list.splice(i,1);
                            }
                        }
                    }
                    this.algList = list;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getStreamConfigList(){
            let params ={
                streamId:this.streamId,
            }
            getHDCAlgDeviceStreamConfigList(params).then(res=>{
                if(res.code == 200) {
                    this.streamConfigList = res.data.list;
                    this.streamConfigList.forEach(i => {
                        i['flag'] = i.state == 1;
                        if(i.params) {
                            i.params = JSON.parse(i.params);
                        } else {
                            i.params = {};
                        }
                    })
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        updateConfigRow(){
            this.addalgModel = true;
            this.getAlgList();
        },
        setBtn(item){
            this.algList.forEach(v=>{
                if(item.id==v.id){
                    v.flag = !v.flag;
                }
            })
        },
        submitAlg(){
            let algTypeList = [];
            this.algList.forEach(i=>{
                if(i.flag){
                    algTypeList.push({
                        algType:i.type,
                        algTypeName:i.name,
                    })
                }
            })
            if(algTypeList.length==0){
                this.$Modal.warning({
                    title: "提示",
                    content: "请选择算法类型"
                });
                return;
            }
            let  params = {
                streamId:this.streamId,
                algTypeList:algTypeList,
            }
            getHDCAlgDeviceStreamConfigAdd(params).then(res=>{
                if(res.code == 200) {
                     this.addalgModel = false;
                     this.$Message.success("操作成功");
                     this.getStreamConfigList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        updateStatus(index,rows){
            // this.streamConfigList[index].flag = !this.streamConfigList[index].flag
            let params = {
                id:rows[index].id,
                state:rows[index].flag?0:1
            }
            getHDCAlgDeviceStreamConfigEdit(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getStreamConfigList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        flv_close() {
            this.ConfigureModal = false;
            this.$refs.videoElement.setAttribute('src', '')
            this.cancelVideo();
        },
        showVideo(url) {
            let video = this.$refs.videoElement; //定义挂载点
            if (hlsjs.isSupported()) {
                this.hlsjs = new hlsjs();
                this.hlsjs.loadSource(url);
                this.hlsjs.attachMedia(video);
                this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                    this.video.play();
                });
                this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                    // console.log(event, data);
                    // 监听出错事件
                });
            } else if (this.$refs.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
                this.$refs.videoElement.src = source;
                this.$refs.videoElement.addEventListener('loadedmetadata', function () {
                    var _this = this;
                    _this.$refs.videoElement.play();
                });
            } else {
                this.$message.error("不支持的格式");
                return;
            }
        },
        configRow(index,rows){
            this.ConfigureModal = true;
            this.algId = rows[index].id;
            this.configType = rows[index].algType;
            this.showVideo(this.streamUrl);
            this.drawbtn = false;
            var canvas = document.getElementById("cvs");
            var cvs = document.getElementById("cvs");
            var ctx = cvs.getContext('2d');
            var clickRightHtml = document.getElementById("clickRightMenu");
            if (rows[index].algType == 40) {
                this.line = 2 //画多边形
            } else {
                this.line = 1  //画直线
            }
            clickRightHtml.style.display = "none";//每次右键都要把之前显示的菜单隐藏哦
            var _that = this;
            // clearCav();
            if(JSON.stringify(rows[index].params) == '{}') {
                this.timeList = [];
                this.points = [];
            } else {
                this.timeList = rows[index].params.timeList;
                if(rows[index].params.line) {
                    this.points= rows[index].params.line
                } else if (rows[index].params.polygon) {
                    this.points = rows[index].params.polygon
                } else {
                    this.points = [];
                }
            }
            canvas.oncontextmenu = function (event) {
                if (_that.drawbtn) {
                    var event = event || window.event;
                    clickRightHtml.style.display = "block";
                    clickRightHtml.style.left = event.clientX - (document.body.clientWidth - 1032) / 2 + "px";
                    clickRightHtml.style.top = event.clientY - 200 + "px";
                    return false;//屏蔽浏览器自带的右键菜单
                }
            };
            var newHandle = function (event) {
                mousedownHandler(event);
            }
            cvs.addEventListener("mousedown", newHandle, false);
            cvs.addEventListener("dbclick", function (event) {
                console.log(event)
            });
            this.drawFlag = false;
            function mousedownHandler(event) {
                if (_that.drawbtn) {
                    if (event.button == 0 && !_that.drawFlag) {
                        if (_that.line == 1 && _that.points.length == 1) {
                            return;
                        } else {
                            let xNum = event.pageX - (document.body.clientWidth - 1032) / 2 - 16;
                            let yNum = event.pageY - 100 - 51 - 16;
                            if (_that.points.length > 0) {
                                if (_that.points[_that.points.length - 1].x == xNum && _that.points[_that.points.length - 1].y == yNum) {
                                    return
                                }
                            }
                            _that.points.push({
                                x: xNum,
                                y: yNum
                            });
                            if (_that.points.length >= 1) {
                                cvs.addEventListener("mousemove", mousemoveHandler, false);
                            }
                            drawPolygon(_that.points);
                        }
                    } else if (event.button === 2) {
                        _that.drawFlag = true;
                        if (_that.points.length > 0) {
                            let xNum = event.pageX - (document.body.clientWidth - 1032) / 2 - 16;
                            let yNum = event.pageY - 100 - 51 - 16;
                            if (_that.points.length > 0) {
                                if (_that.points[_that.points.length - 1].x == xNum && _that.points[_that.points.length - 1].y == yNum) {
                                    cvs.removeEventListener("mousemove", mousemoveHandler);
                                    return
                                } else {
                                    _that.points.push({
                                        x: xNum,
                                        y: yNum
                                    });
                                    cvs.removeEventListener("mousemove", mousemoveHandler);
                                }
                            }

                        }
                    }
                }
            }
            function drawPolygon(points) {
                ctx.clearRect(0, 0, 1000, 550);
                ctx.strokeStyle = 'red';
                ctx.beginPath();
                ctx.moveTo(points[0].x,points[0].y);
                for (var i = 1; i < points.length; i++) {
                    ctx.lineTo(points[i].x, points[i].y);
                }
                ctx.closePath();
                ctx.stroke();
            }
            function mousemoveHandler(event) {
                drawPolygon(_that.points.concat({
                    x: event.pageX - (document.body.clientWidth - 1032) / 2 - 16,
                    y: event.pageY - 100 - 51 - 16
                }));
            }
            $('#btn').click(function () {
                clickRightHtml.style.display = "none"
                if (_that.points.length == 0) {
                    _that.$Message.warning('您还未选择区域')
                    return;
                }
                this.drawFlag = false;
            })
            //清空所绘制的图表
            function clearCav() {
                ctx.clearRect(0, 0, 1000, 750);
                _that.drawFlag = false;
                _that.points = [];
            }
            $('#btn1').click(function () {
                clearCav();
                clickRightHtml.style.display = "none"
            })
        },
        cancelVideo() {
            if (this.hlsjs) {
                this.$refs.videoElement.pause();
                this.hlsjs.destroy();
                this.hlsjs = null;
            }
        },
        paramsRow(index,rows){
            this.algId = rows[index].id;
            if(rows[index].configs) {
                this.paramsList = JSON.parse(rows[index].configs);
                this.paramsNewList = JSON.parse(rows[index].configs);
            } else {
                this.paramsList = [];
                this.paramsNewList = [];
            }

            this.paramsModal = true;
        },
        paramsAdd(){
           let obj = {
               key:"",
               value:"",
           };
           this.paramsList.push(obj);
        },
        paramsEdit(){
             this.paramsFlag = false;
        },
        removeParamsRow(index,rows){
            this.paramsList.splice(index,1)
        },
        submitParams(){
             for(let i = 0;i<this.paramsList.length; i++) {
                 if(this.paramsList[i].key == '' || this.paramsList.value == ''){
                     this.$Modal.warning({
                         title: "您有必填字段",
                         content: "请输入参数名称或地址"
                     });
                     return;
                 }
             }
             let params = {
                 id:this.algId,
                 configs:JSON.stringify(this.paramsList),
             }
            getHDCAlgDeviceStreamConfigEdit(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.paramsFlag = true;
                    this.getStreamConfigList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        removeConfigRow(index,rows){
            this.algId = rows[index].id;
            this.deleteComgigModal = true;
        },
        deteleConfig(){
            getHDCAlgDeviceStreamConfigDel(this.algId).then(res=>{
                if(res.code == 200) {
                    this.deleteComgigModal = false;
                    this.$Message.success("操作成功");
                    this.getStreamConfigList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //添加时间配置
        addTime() {
            let obj = {
                time: ['00:00', '00:00']
            }
            this.timeList.push(obj);
        },
        //删除时间配置
        delTime(index) {
            this.timeList.splice(index, 1)
        },
        drawCanvas(){
            this.points = [];
            this.drawFlag = false;
            this.drawbtn = true;
        },
        sumbitConfigure() {
            let obj = {}
            if (this.line == 1) {
                obj = {
                    personNum: this.personNum,
                    times: this.times,
                    line: this.points,
                    timeList: this.timeList
                }
            } else {
                obj = {
                    personNum: this.personNum,
                    times: this.times,
                    polygon: this.points,
                    timeList: this.timeList
                }
            }
            let params = {
                id:this.algId,
                params:JSON.stringify(obj)
            }
            getHDCAlgDeviceStreamConfigEdit(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getStreamConfigList();
                    this.ConfigureModal = false;
                    this.$refs.videoElement.setAttribute('src', '')
                    this.cancelVideo();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })

        },
    },
    mounted() {
        this.bound_sn = localStorage.getItem("sn");
        this.getConfigUrlList();
        this.getStreamList();
    }
}

</script>

<style lang="less" scoped >
   .main_content {
       width: 100%;
       height: 100%;
       padding: 10px;
       box-sizing: border-box;
       background: #f5f5f5;
        .search {
            width: 100%;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            background: #fff;
            border-radius: 5px;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-left: 20px;
                span{
                    width: 90px;
                }
            }
        }
        .bottom{
            width: 100%;
            height: calc(100% - 82px);
            margin-top: 10px;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 10px;
            background: #fff;
            /deep/ .el-tabs {
                width: 100%;
                height: 100%;
                .el-tabs__content{
                    width: 100%;
                    height: calc(100% - 40px);
                    .el-tab-pane{
                        width: 100%;
                        height: 100%;
                        .second{
                            width: 100%;
                            height: 100%;
                            .second_content{
                                width: 100%;
                                height: calc(100% - 60px);
                                ul{
                                    width: 100%;
                                    height: 100%;
                                    list-style: none;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: flex-start;
                                    overflow-y: hidden;
                                    li{
                                        width: 100%;
                                        height: 40px;
                                        display: flex;
                                        justify-content: flex-start;
                                        align-items: center;
                                        span{
                                            margin-right: 20px;
                                        }
                                    }
                                }
                                ul::-webkit-scrollbar {
                                    width: 6px;
                                    height: 10px;
                                }
                                ul:hover{
                                    overflow-y: auto;
                                }
                                /*滚动槽*/
                                ul::-webkit-scrollbar-track {
                                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                                    border-radius: 10px;
                                }
                                /* 滚动条滑块 */
                                ul::-webkit-scrollbar-thumb {
                                    border-radius: 10px;
                                    background: rgba(0, 0, 0, 0.1);
                                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
                                }
                                ul::-webkit-scrollbar-thumb:window-inactive {
                                    background: rgba(255, 0, 0, 0.4);
                                }
                                .no_data{
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-content: center;
                                    font-size: 18px;
                                }
                            }
                            .second_bottom{
                                width: 100%;
                                height: 60px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                        .first{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .left{
                                width: 200px;
                                height: 100%;
                                border-right: 1px solid #999;
                                display: flex;
                                flex-direction: column;
                                justify-content: flex-start;
                                align-items: center;
                                ul{
                                    width: 100%;
                                    height: calc(100% - 40px);
                                    list-style: none;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: flex-start;
                                    align-items: center;
                                    margin-top: 10px;
                                    overflow-y: scroll;
                                    li{
                                        width: 100%;
                                        height: 30px;
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        padding: 0 10px;
                                        background: #f9f9f9;
                                        color: #424242;
                                        margin-bottom: 5px;
                                        cursor: pointer;
                                    }
                                    .active{
                                        background: #0058F9;
                                        color: #fff;
                                    }
                                }
                                ul::-webkit-scrollbar {
                                    display: none;
                                }

                            }
                            .right{
                                width: calc(100% - 200px);
                                height: 100%;
                                .top{
                                    height: 40px;
                                    width: 96%;
                                    margin: 0 auto;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                }
                                .bottom{
                                    height: calc(100%  - 40px);
                                    width: 96%;
                                    margin: 0 auto;
                                    padding: 0;
                                }
                            }
                        }
                    }

                }
            }
        }
   }
   .item2 {
       width: 470px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
       height: 32px;
       position: relative;
       margin-right: 50px;
       span {
           width: 70px;
           margin-left: 10px;
       }
       .tip {
           position: absolute;
           color: red;
           font-size: 16px;
           left: -5px;
           top: 5px;
           width: 5px;
       }
   }
   .addModel{
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       .bottom{
           padding-top: 20px;
           width: 100%;
           height: calc(100%);
           background: #fff;
           border-radius: 10px;
           .list {
               width: 98%;
               margin: 20px auto;
               display: flex;
               justify-content: flex-start;
               align-items: center;
               flex-wrap: wrap;
               .item{
                   width: 266px;
                   height: 228px;
                   margin-right: 25px;
                   margin-bottom: 25px;
                   position: relative;
                   border: 2px solid transparent;
                   box-sizing: border-box;

                   &.active{
                       border: 2px solid red !important;
                   }
                   &:nth-of-type(3n){
                       margin-right: 0;
                   }
                   .img{
                       display: block;
                       width: 100%;
                       height: 100%;
                   }
                   .text{
                       position: absolute;
                       top: 50%;
                       left: 50%;
                       transform: translate(-50%,-50%);
                       color: #fff;
                   }
               }
           }
       }
   }
   .configure{
       width: 1000px;
       height: auto;
       margin: 0 auto;
       position: relative;
       .canvas-box {
           position: absolute;
           top: 0;
           left: 0;
       }
       .attribute{
           position: relative;
           overflow: hidden;
           padding: 30px 0;
           .draw {
               position: absolute;
               top: 10px;
               right: 0;
           }
           .attrTiltle{
               font-size: 15px;
               padding: 10px 0;
           }
           .timeLi{
               display: inline-block;
               width: 250px;
               margin-bottom: 20px;
           }
       }
       .clickRightMenu {
           width: 110px;
           background-color: #fff;
           font-size: 12px;
           position: absolute;
           text-align: left;
           padding: 2px 0;
           border: 1px solid #ccc;
           display: none;
           z-index: 100;
       }

       .clickRightMenu li {
           list-style: none;
           line-height: 20px;
           padding-left: 25px;
       }

       .clickRightMenu li:hover {
           background-color: #dcdcdc;
           cursor: pointer;
       }
   }
</style >
